<template>
  <div name="sindex" class="sindex-page">
    <div style="width: 300px; height: 300px; border: 1px solid blue">
      <div class="chart-container">
        <div style="height: 100%; width: 100%" class="chart" ref="chart"></div>
        <!-- 底座背景 -->
      </div>
    </div>
    <News />
    <Title :name="'数据中心'" />
    <DataCenter ref="DataCenter" />

    <Title :name="'部门资源'" />
    <Department ref="Department" />
    <Morebtn />

    <Title :name="'主题资源'" />
    <Resources />
    <Morebtn />

    <Title :name="'APP应用'" />
    <Application />
    <Morebtn />
  </div>
</template>
<script>
import News from "./news.vue";
import DataCenter from "./DataCenter.vue";
import Department from "./Department.vue";
import Resources from "./Resources.vue";
import Application from "./Application.vue";
import Title from "@/components/base/Title";
import Morebtn from "@/components/base/Morebtn.vue";
import * as echarts from "echarts";
import { getPie3D } from "./chart.js";
const color = ["#005aff", "red"];
export default {
  components: {
    News,
    DataCenter,
    Department,
    Resources,
    Application,
    Title,
    Morebtn,
  },
  data() {
    return {
      optionData: [
        {
          name: "启用电梯111",
          value: 176,
        },
        {
          name: "停用电梯",
          value: 288,
        },
      ],
      statusChart: null,
      option: {},
    };
  },
  created() {
    this.setLabel();
  },
  mounted() {
    this.initChart();

    //根据窗口变化自动调节图表大小
    // const that = this;
    // window.onresize = function () {
    //   that.changeSize();
    // };
  },
  methods: {
    // 初始化label样式
    setLabel() {
      this.optionData.forEach((item, index) => {
        item.itemStyle = {
          color: color[index],
        };
        item.label = {
          normal: {
            show: true,
            color: color[index],
            formatter: ["{b|{b}}", "{c|{c}}{b|台}", "{d|{d}%}"].join("\n"), // 用\n来换行
            rich: {
              b: {
                color: "#fff",
                lineHeight: 25,
                align: "left",
              },
              c: {
                fontSize: 22,
                color: "#fff",
                textShadowColor: "#1c90a6",
                textShadowOffsetX: 0,
                textShadowOffsetY: 2,
                textShadowBlur: 5,
              },
              d: {
                color: color[index],
                align: "left",
              },
            },
          },
        };
        item.labelLine = {
          normal: {
            lineStyle: {
              width: 1,
              color: "rgba(255,255,255,0.7)",
            },
          },
        };
      });
    },
    // 图表初始化
    initChart() {
      this.statusChart = echarts.init(this.$refs.chart);
      console.log("getPie3D", getPie3D);
      console.log("this.optionData", this.optionData);
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
      this.option = getPie3D(this.optionData, 0, 320, 28, 26, 0.5);
      this.statusChart.setOption(this.option);
      //
      this.option.series.push({
        name: "电梯状态", //自己根据场景修改
        backgroundColor: "transparent",
        type: "pie",
        label: {
          opacity: 1,
          fontSize: 13,
          lineHeight: 20,
        },
        startAngle: -40, // 起始角度，支持范围[0, 360]。
        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["20%", "50%"],
        center: ["50%", "50%"],
        data: this.optionData,
        itemStyle: {
          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
        },
      });
      this.statusChart.setOption(this.option);
    },
  },
};
</script>
<style lang="less" scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
